<template>
	<view>
		<u-navbar title="场景基础设置" titleStyle="color:#fff;" :placeholder="true" leftIconColor="#fff" :autoBack="true" bgColor="#1F1F1F">
			
		</u-navbar>
		
		<view class="scene_add">
			
			<!--  -->
			<view class="head-line">
				<view class="head">
					<image class="avatar" v-if="avatar" @click="upCoverPhoto('avatar')" :src="avatar" mode="aspectFill" style="display: block;width: 200rpx;height: 200rpx;"></image>
					<image class="avatar"v-else @click="upCoverPhoto('avatar')" src="../static/img/ico_add1.png" mode="aspectFill" style="display: block;width: 200rpx;height: 200rpx;"></image>
				</view>
				<view class="name">
						头像
				</view>
			</view>
			
			<!--  -->
			<view class='line-item'>
				<view class="title">
					标题<text>*</text>
				</view>
				<view class="info">
					<u--input
						placeholder="请输入标题"
						border="none"
						v-model="name"
						customStyle="background:#2C2C2C;padding:12rpx 20rpx;"
						placeholderStyle="color:#979797;"
						fontSize="26rpx"
						color="#fff"
					></u--input>
				</view>
			</view>	
			
			<!--  -->
			<view class='line-item'>
				<view class="title">
					昵称
				</view>
				<view class="info">
					<u--input
						placeholder="请输入昵称"
						border="none"
						v-model="nickname"
						customStyle="background:#2C2C2C;padding:12rpx 20rpx;"
						placeholderStyle="color:#979797;"
						fontSize="26rpx"
						color="#fff"
					></u--input>
				</view>
			</view>	
		
		
			<!--  -->
			<view class='line-item-block'>
				<view class="line-title">
					<view class="title">
						封面<text></text> <text class="text"> （允许类型: png, jpg, jpeg.）</text>
					</view>
				</view>
				<view class="line-info">
					<image v-if="file" @click="upCoverPhoto('file')" :src="file" mode="aspectFill" style="display: block;width: 200rpx;height: 200rpx;border-radius: 15rpx;"></image>
					<image v-else @click="upCoverPhoto('file')" src="../static/img/ico_add1.png" mode="aspectFill" style="display: block;width: 200rpx;height: 200rpx;border-radius: 15rpx;"></image>
				</view>
			</view>	
			
			
			<!--  -->
			<view class='line-item-block'>
				<view class="line-title">
					<view class="title">
						简介<text>*</text><text class="text">（限制最大70字符</text>
					</view>
				</view>
				<view class="line-info">
					<textarea class="personal_textarea"
						placeholder="示例: 你的英语老师"
						border="none"
						v-model="sub_title"
						maxlength="70"
						customStyle="background:#2C2C2C;padding:12rpx 20rpx;"
						placeholderStyle="color:#979797;"
						fontSize="26rpx"
						color="#fff"
					/>
				</view>
			</view>	
			
			<!--  -->
			<view class='line-item-block'>
				<view class="line-title">
					<view class="title">
						人设
					</view>
				</view>
				<view class="line-info">
					<textarea class="personal_textarea"
						placeholder="示例: 你是一名英语老师，姓名：林悦。你教学经验丰富，对学生严格又不失耐心。你总是鼓励我大胆开口说英语，对我的错误会细心纠。"
						border="none"
						v-model="role_discription"
						maxlength="2000"
						customStyle="background:#2C2C2C;padding:12rpx 20rpx;"
						placeholderStyle="color:#979797;"
						fontSize="26rpx"
						color="#fff"
					/>
				</view>
			</view>	
			
			<!--  -->
			<view class='line-item'>
				<view class="title">
					分享标题
				</view>
				<view class="info">
					<u--input
						placeholder="请输入分享的标题"
						border="none"
						v-model="share_title"
						customStyle="background:#2C2C2C;padding:12rpx 20rpx;"
						placeholderStyle="color:#979797;"
						fontSize="26rpx"
						color="#fff"
					></u--input>
				</view>
			</view>	
			
			<!--  -->
			<view class='line-item' style="display: none;">
				<view class="title">
					主画面标题<text class="text"></text>
				</view>
				<view class="info">
					<u--input
						placeholder="请输入主画面标题"
						border="none"
						v-model="show_title"
						customStyle="background:#2C2C2C;padding:12rpx 20rpx;"
						placeholderStyle="color:#979797;"
						fontSize="26rpx"
						color="#fff"
					></u--input>
				</view>
			</view>	
		
			<!--  -->
			<view class='line-item-block'>
				<view class="line-title">
					<view class="title">
						选择形象<text class="text"> （选择形象后将不可更改）</text>
					</view>
				</view>
				<view class="line-info">
					<view v-if="Object.keys(default_videoInfo).length == 0" class="scene_select" @click="showImage = true">
						<view class="name">
							请选择一个形象
						</view>
						<u-icon name="arrow-right" color="#F9BE01" size="28rpx"></u-icon>
					</view>
					<!-- 选择后 -->
					<view v-else class="scene_select_image" >
						<view  style="width: 220rpx; height: 100%;" @click="playVideo()">
							<!-- <video id="pVideo" style="width: 100%; height: 100%;" :src="default_videoInfo.url"></video> -->
							<view class="video-action" v-if="!pVideoPlay">
								<u-icon name="play-right-fill" size="40rpx" color="#ffffff"></u-icon>
							</view>
							<DomVideoPlayer id="pVideo" ref="ppVideoVideoPlayer" style="width: 100%; height: 100%;" :src="default_videoInfo.url"
								:poster="default_videoInfo.image_file" :controls="false" :isLoading="true">
							</DomVideoPlayer>
						</view>
						<view class="btn" @click="showImage = true">
							重选
						</view>
					</view>
				</view>
			</view>	
			
			<!--  -->
			<view class='line-item-block'>
				<view class="line-title">
					<view class="title">
						选择角色声音<text>*</text>
					</view>
				</view>
				<view class="line-info">
					<view v-if="Object.keys(default_audioInfo).length == 0" class="scene_select" @click="showSound = true">
						<view class="name">
							请选择一个角色合成声音
						</view>
						<u-icon name="arrow-right" color="#F9BE01" size="28rpx"></u-icon>
					</view>
					<!-- 选择后 -->
					<view v-else class="scene_select_sound">
						<image v-if="playIndex == 100" @click="clickOnStopAudio()" class="ico" src="../../static/img/ico_stop.png" mode="widthFix"></image>
						<image v-else class="ico" @click="clickOnPlayAudio(default_audioInfo.demo_url, 100)" src="../../static/img/ico_play.png" mode="widthFix"></image>
						
						<view class="name">
							{{default_audioInfo.title}}
							<text v-if="default_audioInfo.type == 10"> - 公共</text>
							<text v-else> - 定制</text>
						</view>
						<view  class="btn" @click="showSound = true">
							重选
						</view>
					</view>
				</view>
			</view>	
		
			<!--  -->
			<view class='line-item-block'>
				<view class="line-title">
					<view class="title">
						选择语音小助理声音
					</view>
				</view>
				<view class="line-info">
					<view v-if="Object.keys(audioInfo).length == 0" class="scene_select" @click="showAiSound = true">
						<view class="name">
							请选择一个小助理回复声音
						</view>
						<u-icon name="arrow-right" color="#F9BE01" size="28rpx"></u-icon>
					</view>
					<!-- 选择后 -->
					<view v-else class="scene_select_sound">
						<image v-if="playIndex == 200" @click="clickOnStopAudio()" class="ico" src="../../static/img/ico_stop.png" mode="widthFix"></image>
						<image v-else class="ico" @click="clickOnPlayAudio(audioInfo.auditionUrl, 200)" src="../../static/img/ico_play.png" mode="widthFix"></image>
						
						<view class="name">
							{{audioInfo.name}}
						</view>
						<view  class="btn" @click="showAiSound = true">
							重选
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- <view class="footer_none"></view> -->
		<view class="yellow_btn">
			<view class="btn" @click="aigcLiveAdd">
				立即创建
			</view>
		</view>
		
		<!-- 我的形象 -->
		<u-popup :show="showImage" :closeable="true" mode="center" bgColor="#484848" round="10rpx" @close="closeImage" @open="openImage">
			<view class="select_box">
				<view class="title">
					我的形象
				</view>
				<view class="image_list">
					<view class="item" v-for="(item,index) in sourceData" :key="index">
						<view class="info">
							<image class="ph" :src="item.image_file" mode="aspectFill"></image>
							<view class="name">
								{{item.title}}
							</view>
						</view>
						<view class="btn" @click="selectImage(item)">
							选中
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 合成声音 -->
		<u-popup :show="showSound" :closeable="true" mode="center" bgColor="#484848" round="10rpx" @close="closeSound" @open="openSound">
			<view class="select_box">
				<view class="title">
					合成声音
				</view>
				<view class="sound_list">
					<view class="item" v-for="(item,index) in voiceData" :key="index">
						<image v-if="playIndex == index" @click="clickOnStopAudio()" class="ico" src="../../static/img/ico_stop.png" mode="widthFix"></image>
						<image v-else class="ico" @click="clickOnPlayAudio(item.demo_url, index)" src="../../static/img/ico_play.png" mode="widthFix"></image>
						
						<view class="name">
							{{item.title}}
							<text v-if="item.type == 10"> - 公共</text>
							<text v-else> - 定制</text>
						</view>
						<view class="btn" @click="selectSound(item)">
							选中
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 小助理声音 -->
		<u-popup :show="showAiSound" :closeable="true" mode="center" bgColor="#484848" round="10rpx" @close="closeAiSound" @open="openAiSound">
			<view class="select_box">
				<view class="title">
					小助理声音
				</view>
				<view class="sound_list">
					<view class="item" v-for="(item,index) in assistData" :key="index">
						<image v-if="playIndex == index" @click="clickOnStopAudio()" class="ico" src="../../static/img/ico_stop.png" mode="widthFix"></image>
						<image v-else class="ico" @click="clickOnPlayAudio(item.auditionUrl, index)" src="../../static/img/ico_play.png" mode="widthFix"></image>
						
						<view class="name">
							{{item.name}}
						</view>
						<view class="btn" @click="selectAiSound(item)">
							选中
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	import DomVideoPlayer from "@/components/DomVideoPlayer/DomVideoPlayer.vue";
	export default {
		components: {
			DomVideoPlayer
		},
		data() {
			return {
				name:'',
				file: '',
				sub_title: '',
				
				share_title:'',
				show_title:'',
				nickname:'',
				avatar:'',
				default_audio:'',
				default_video:'',
				audio:'',
				role_discription:'',
				
				default_videoInfo:{},
				default_audioInfo:{},
				audioInfo:{},
				
				fileList1: [],
				showImage: false,
				showSound: false,
				showAiSound: false,
				assistData: [],
				voiceData: [],
				sourceData: [],
				source: [],
				userId: '',
				innerAudioContext:null,
				playIndex: null,
				/** 形象视频是否播放 */
				pVideoPlay: false,
			}
		},
		onLoad() {
			this.userId = uni.getStorageSync('userId');
			this.assistantList()
			this.getSourceList()
			this.getVoiceList()
			this.getAliyunOssSing()
			
			// 播放声音管理器
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.onPlay(() => {
				console.log('开始播放');
			});
			this.innerAudioContext.onStop(() => {
				console.log('停止播放');
			});
			this.innerAudioContext.onEnded(() => {
				console.log('自然播放结束');
				this.playIndex = null
			});
			
		},
		onUnload(){
			console.log('后退');
			this.innerAudioContext.stop();
			this.innerAudioContext = null
			this.playIndex = null
		},
		methods: {
			// playFullScreen() {
			//     const videoContext = wx.createVideoContext('pVideo');  // 获取视频上下文
			//     videoContext.requestFullScreen();  // 进入全屏播放
			// },
			// 播放声音
			clickOnPlayAudio(url,index){
				this.innerAudioContext.stop();
				this.innerAudioContext.src = url;
				this.innerAudioContext.play();
				this.playIndex = index
			},
			// 停止声音
			clickOnStopAudio(){
				this.innerAudioContext.stop();
				this.playIndex = null
			},
			// 获取阿里云上传请求参数
			getAliyunOssSing(){
				uni.$u.http.get('/api/aliyun_oss_sign/'+this.userId +'?from=miniprogram').then(res => {
					console.log('阿里云请求参数-----',res.data.data)
					this.aliyunOssSign = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			// 上传背景图片
			upCoverPhoto(type){
				const that = this
				uni.chooseImage({
					count: 1,
					success: function (res) {
						const tempFilePath = res.tempFilePaths[0];
						const timestamp = new Date().getTime();
						const randomNum = Math.floor(Math.random() * 10000);
						const fileName = timestamp + "_" + randomNum + tempFilePath.substring(tempFilePath.lastIndexOf('.'));
						console.log('视频名称---',fileName)
						
						uni.showLoading({
							title: '上传中',
							mask: true
						});
						uni.uploadFile({
							url: that.aliyunOssSign.host,
							filePath: tempFilePath,
							name: 'file',
							formData: {
								key: that.aliyunOssSign.dir+fileName,
								policy: that.aliyunOssSign.policy,
								OSSAccessKeyId: that.aliyunOssSign.accessid,
								signature: that.aliyunOssSign.signature
							},
							success: (resa) => {
								console.log('上传------',resa)
								if(resa.statusCode == 204)
								{
									if(type == 'avatar'){
										that.avatar = that.aliyunOssSign.host +'/'+ that.aliyunOssSign.dir + fileName
									}else{
										that.file = that.aliyunOssSign.host +'/'+ that.aliyunOssSign.dir + fileName
									}
									uni.hideLoading();
								}
								else{
									uni.hideLoading();
									uni.showToast({
										title: '上传失败,请重新上传',
										duration: 2000,
										icon: 'none'
									});
								}
							}
						});
					}
				});
			},
			selectAiSound(item){
				this.showAiSound = false
				this.innerAudioContext.stop();
				this.playIndex = null
				this.audioInfo = item
				this.audio = JSON.stringify(this.audioInfo)
			},
			selectSound(item){
				this.showSound = false
				this.innerAudioContext.stop();
				this.playIndex = null
				this.default_audioInfo = item
				this.default_audio = JSON.stringify(this.default_audioInfo)
			},
			selectImage(item){
				this.showImage = false
				this.default_videoInfo = item
				this.default_video = JSON.stringify(this.default_videoInfo)
			},
			// 新建互动场景
			aigcLiveAdd(){
				if(!this.name){
					uni.showToast({
						title: '请填写场景名称',
						duration: 2000,
						icon:'error'
					});
					return
				}
				// if(!this.file){
				// 	uni.showToast({
				// 		title: '请上传场景封面',
				// 		duration: 2000,
				// 		icon:'none'
				// 	});
				// 	return
				// }
				if(!this.sub_title){
					uni.showToast({
						title: '请填写场景简介',
						duration: 2000,
						icon:'error'
					});
					return
				}
				if(Object.keys(this.default_audioInfo).length == 0){
					uni.showToast({
						title: '请选择角色声音',
						duration: 2000,
						icon:'error'
					});
					return
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				});
				uni.$u.http.post('/api/aigc_live_add/'+this.userId +'?from=miniprogram',{
					name: this.name,
					file: this.file,
					sub_title: this.sub_title,
				}).then(res => {
					console.log('新建互动场景-----',res.data)
					this.aigcLiveConfigAdd(res.data.data)
				}).catch(err => {
					console.log(err)
					uni.hideLoading();
				})
			},
			// 添加场景扩展配置
			aigcLiveConfigAdd(id){
				const detailData = {
					default_audio: this.default_audioInfo,
					default_video: this.default_videoInfo,
				}
				const shareInfo = {
					share_title: this.share_title,
					show_title: this.show_title,
				}
				uni.$u.http.post('/api/aigc_lives_config_add/'+this.userId +'?from=miniprogram',{
					live_id: id,
					nickname: this.nickname,
					avatar: this.avatar,
					audio: this.audio,
					role_discription: this.role_discription,
					share_info: JSON.stringify(shareInfo),
					detail: JSON.stringify(detailData),
				}).then(res => {
					console.log('添加场景扩展配置-----',res.data)
					uni.hideLoading();
					// uni.redirectTo({
					// 	url: '/myPages/create/create'
					// });
					uni.navigateBack({
						delta: 1
					});
				}).catch(err => {
					console.log(err)
					uni.hideLoading();
				})
			},
			// 我的形象
			getSourceList(){
				uni.$u.http.get('/api/speed_source_list/'+this.userId +'?from=miniprogram&type=0&count=999').then(res => {
					console.log('我的形象-----',res.data.data)
					this.sourceData = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			// 我的声音
			getVoiceList(){
				uni.$u.http.get('/api/speed_voice_list/'+this.userId +'?from=miniprogram&count=999&status=0').then(res => {
					console.log('我的声音-----',res.data.data)
					this.voiceData = res.data.data
				}).catch(err => {
					console.log(err)
				})
				//公共声音
				uni.$u.http.get('/api/speed_voice_list/'+this.userId +'?from=miniprogram&count=999&status=0&is_public=1').then(res => {
					console.log('我的声音-----',res.data.data)
					this.voiceData = this.voiceData.concat(res.data.data)
				}).catch(err => {
					console.log(err)
				})
			},
			// 小助理声音列表
			assistantList(){
				uni.$u.http.get('/api/speed_assistant_list/'+this.userId +'?from=miniprogram').then(res => {
					console.log('小助理声音列表-----',res.data.data)
					this.assistData = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			openAiSound() {
				// console.log('open');
			},
			closeAiSound() {
				this.showAiSound = false
				this.innerAudioContext.stop();
				this.playIndex = null
				// console.log('close');
			},
			openSound() {
				// console.log('open');
			},
			closeSound() {
				this.showSound = false
				this.innerAudioContext.stop();
				this.playIndex = null
				// console.log('close');
			},
			openImage() {
				// console.log('open');
			},
			closeImage() {
				this.showImage = false
				// console.log('close');
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			/** 形象视频播放控制 */
			playVideo() {
				const videoPlayer = this.$refs.ppVideoVideoPlayer;
				if (this.pVideoPlay) {
					this.pVideoPlay = false;
					videoPlayer.pause();
				} else{
					this.pVideoPlay = true;
					videoPlayer.play();
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
.personal_textarea{
	display: block;
	width: 100%;
	font-size: 26rpx;
	background:#2C2C2C;
	box-sizing: border-box;
	border: none;
	border-radius: 10rpx;
	color:#fff;
	height: 200rpx;
	line-height: 36rpx;
}
.scene_select_image{
	position: relative;
	height: 330rpx;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	.ph{
		display: block;
		width: 100%;
	}
	.ico{
		position: absolute;
		left: 50%;
		top: 50%;
		width: 70rpx;
		height: 70rpx;
		margin-left: -35rpx;
		margin-top: -35rpx;
		z-index: 9;
	}
	.btn{
		width: 95rpx;
		height: 44rpx;
		border-radius: 32.5px;
		background: #FFB200;
		text-align: center;
		font-size: 20rpx;
		font-weight: normal;
		line-height: 44rpx;
		color: #1F1F1F;
		margin-left: 30rpx;
	}
	.video-action {
		position: absolute;
		top: 46%;
		left: 85rpx;
		width: 55rpx;
		height: 55rpx;
		border-radius: 27.5rpx;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}
.scene_select_sound{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 70rpx;
	border-radius: 10rpx;
	background: #2C2C2C;
	padding:0 20rpx;
	box-sizing: border-box;
	.ico{
		flex-shrink: 0;
		width: 38rpx;
		height: 38rpx;
		margin-right: 10rpx;
	}
	.name{
		width: 100%;
		font-size: 26rpx;
		font-weight: 600;
		line-height: 40rpx;
		color: #FFFFFF;
	}
	.btn{
		width: 95rpx;
		height: 44rpx;
		border-radius: 32.5px;
		background: #FFB200;
		text-align: center;
		font-size: 20rpx;
		font-weight: normal;
		line-height: 44rpx;
		color: #1F1F1F;
	}
}
.select_box{
	width: 610rpx;
	border-radius: 10rpx;
	.sound_list{
		width: 100%;
		height: 410rpx;
		overflow-y: auto;
		padding:0 40rpx;
		box-sizing: border-box;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 70rpx;
			border-radius: 10rpx;
			background: #2C2C2C;
			padding:0 20rpx;
			margin-bottom: 30rpx;
			box-sizing: border-box;
			.ico{
				flex-shrink: 0;
				width: 38rpx;
				height: 38rpx;
				margin-right: 10rpx;
			}
			.name{
				width: 100%;
				font-size: 26rpx;
				font-weight: 600;
				line-height: 40rpx;
				color: #FFFFFF;
			}
			.btn{
				width: 95rpx;
				height: 44rpx;
				border-radius: 32.5px;
				background: #FFB200;
				text-align: center;
				font-size: 20rpx;
				font-weight: normal;
				line-height: 44rpx;
				color: #1F1F1F;
			}
		}
	}
	.image_list{
		width: 100%;
		height: 420rpx;
		overflow-y: auto;
		display: flex;
		flex-wrap: wrap;
		padding:0 10rpx;
		.item{
			margin-left: 30rpx;
			padding-bottom: 30rpx;
			.info{
				position: relative;
				width: 160rpx;
				height: 280rpx;
			}
			.ph{
				display: block;
				width: 160rpx;
				height: 280rpx;
				border-radius: 10rpx;
			}
			.name{
				position: absolute;
				left:0;
				bottom: 0;
				right: 0;
				width: 100%;
				height: 50rpx;
				box-sizing: border-box;
				line-height: 50rpx;
				overflow: hidden;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3981) 100%);
				color:#fff;
				font-size: 20rpx;
				padding:0 10rpx;
			}
			.btn{
				width: 95rpx;
				height: 44rpx;
				border-radius: 32.5px;
				background: #FFB200;
				text-align: center;
				font-size: 20rpx;
				font-weight: normal;
				line-height: 44rpx;
				color: #1F1F1F;
				margin: 18rpx auto 0;
			}
		}
		
	}
	.title{
		text-align: center;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		color: #FFFFFF;
		padding:25rpx 0 25rpx;
	}
}
/deep/.u-upload__wrap__preview{
	margin: 0;
}
.scene_add{
	padding:0 40rpx;
	.head-line{
		.head{
			display: flex;
			justify-content: center;
			align-items: center;
			.avatar{
				margin-top: 20rpx;
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				border:2rpx solid #fff;
				box-sizing: border-box;
				overflow: hidden;
			}
			
			
		}
		.name{
			font-size: 26rpx;
			font-weight: normal;
			line-height: 40rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 15rpx;	
		}
	}

	
	.line-item{
		margin-top: 30rpx;
		padding: 0rpx 30rpx 20rpx 30rpx;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		background:#2C2C2C;
		border-radius: 15rpx;
		.title{
			flex-shrink: 0;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 30rpx;
			text-align: justify;
			color: #FFFFFF;
			width: 160rpx;
			text{
				display: block;
				color: #FF1313;
				font-size: 26rpx;
				line-height: 30rpx;
			}
			.text{
				color: #979797;
				font-size: 26rpx;
				line-height: 40rpx;
			}
		}
		.info{
			padding-top: 18rpx;
			width: 100%;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 30rpx;
		}
		
		
	}
	.line-item-block{
		margin-top: 30rpx;
		padding: 0rpx 30rpx 20rpx 30rpx;
		display: block;
		align-items: flex-start;
		justify-content: space-between;
		background:#2C2C2C;
		border-radius: 15rpx;
		.line-title{
			flex-shrink: 0;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 30rpx;
			text-align: justify;
			color: #FFFFFF;
			text{
				display: block;
				color: #FF1313;
				font-size: 26rpx;
				line-height: 30rpx;
			}
			.text{
				color: #979797;
				font-size: 26rpx;
				line-height: 40rpx;
			}
		}
		.line-info{
			width: 100%;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 30rpx;
		}
	}
	.scene_select{
		display: inline-flex;
		align-items: center;
		height: 50rpx;
		border-radius: 6rpx;
		box-sizing: border-box;
		border: 1rpx solid #F9BE01;
		padding:0 15rpx 0 20rpx;
		.name{
			font-size: 26rpx;
			font-weight: 500;
			line-height: 40rpx;
			color: #F9BE01;
			padding-right: 10rpx;
		}
	}
	.title{
		display: flex;
		align-items: center;
		padding:40rpx 0 20rpx;
		.text{
			color: #979797;
			font-size: 26rpx;
			line-height: 40rpx;
		}
		.name{
			font-size: 26rpx;
			font-weight: normal;
			line-height: 40rpx;
			color: #FFFFFF;
		}
		text{
			display: block;
			color: #FF1313;
			font-size: 26rpx;
			line-height: 40rpx;
		}
	}
}


.footer_none{
	width: 100%;
	height: 180rpx;
}
.footer_yellow_btn{
	position: fixed;
	left:40rpx;
	right: 0;
	bottom: 70rpx;
	width: 670rpx;
	height: 70rpx;
	border-radius: 35rpx;
	background: #F9BE01;
	line-height: 70rpx;
	text-align: center;
	font-size: 26rpx;
	font-weight: normal;
	color: #292D32;
}
.yellow_btn{
	padding:50rpx 40rpx 70rpx;
	.btn{
		height: 70rpx;
		border-radius: 35rpx;
		background: #F9BE01;
		line-height: 70rpx;
		text-align: center;
		font-size: 26rpx;
		font-weight: normal;
		color: #292D32;
	}
}
</style>
